<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html ng-app="app" id="ng-app">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%@include file="/include/style.jsp"%>
<%@include file="/include/script.jsp"%>
<script type="text/javascript" src="/js/checktree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/js/checktree/jquery.ztree.excheck-3.5.js"></script>
<link type="text/css" rel="stylesheet" href="/js/checktree/zTreeStyle.css" />
<script type="text/javascript">
function RoleCtrl($scope, $http) {
	$scope.roleId = '${requestScope.roleId}';
	
	var zTree = null;

	$scope.backPage = function() {
		window.location.href = "/role/index";
	};	
	
	$scope.save = function() {
		if ($scope.isNameInvalid() || $scope.isDescInvalid()) {
			return;
		}
		
		$scope.permissionError = undefined;
		
		var role = {
			id: $scope.roleId,
			name: $scope.roleName && $scope.roleName.trim(),
			description: $scope.description,
			permissions: []
		};
		
		zTree.getCheckedNodes(true).each(function(item) {
			item.mLevel == 2 && role.permissions.push(item.ename);
		});
		
		if (role.permissions.length == 0) {
			$scope.permissionError = "请选择授予该角色的权限！";
		} else {
			$http.post("/role/" + $scope.mode, role).success(function(response) {
				if (response.success) {
					$scope.backPage();
				} else {
					Message.error("错误", response.message || "操作失败！");	
				}
			});
		}
		
	};
	
	$scope.isNameInvalid = function() {
		$scope.roleNameError = undefined;
		
		if (!$scope.roleName) {
			$scope.roleNameError = "角色名称不能为空！";
		} else if ($scope.roleName.containsSpacialChar()) {
			$scope.roleNameError = "角色名称不能出现\" ' < > & ? # =特殊字符！";
		}
		
		return $scope.roleNameError;
	};
	
	$scope.isDescInvalid = function() {
		$scope.roleDescError = undefined;
		
		if (!$scope.description) {
			return false;
		}
		
		if ($scope.description.containsSpacialChar()) {
			$scope.roleDescError = "描述中不能出现\" ' < > & ? # =特殊字符！";
		}
		
		return $scope.roleDescError;
	};
	
	$scope.initRolePermission = function() {
		if ($scope.roleId) {
			$scope.mode = 'update';
			$http.post("/role/roleAndPermission/" + $scope.roleId).success(function(response) {				
				$scope.roleName = response.data.roleName;
				$scope.description = response.data.description;

				$scope.initTreeNodes(response.data.modules);
			});
		} else {
			$scope.mode = 'create';
			$http.post("/role/queryAllPermissions").success(function(response) {
				$scope.initTreeNodes(response.data);
			});
		}		
	};	
	
	$scope.initTreeNodes = function(permissions) {
		var setting = {
			view: {
				dblClickExpand: false
			},
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: function(event, treeId, treeNode) {
					zTree.expandNode(treeNode);
				}			
			}
		};

		var zNodes = [];
		
		permissions && permissions.each(function(module, index) {
			var moduleId = (index + 1) * 10000;
			module.menus && module.menus.each(function(menu, mIndex) {
				var menuId = moduleId + (mIndex + 1) * 100;				
				menu.permissions && menu.permissions.each(function(per, pIndex) {
					var permissionId = menuId + (pIndex + 1);
					zNodes.push({id: permissionId, pId: menuId, name: per.text, ename: per.name, mLevel: 2, checked: per.has, chkDisabled:false});
				});
				menu.has = menu.permissions && menu.permissions.all(function(item) { return item.has;});
				var isChecked = menu.has = menu.permissions && menu.permissions.any(function(item) { return item.has;});
				zNodes.push({id: menuId, pId: moduleId, name: menu.text, ename: menu.name, mLevel: 1, checked: isChecked});
			});
			zNodes.push({id: moduleId, pId: 0, name: module.text, ename: module.name, mLevel: 0, open: true, checked: module.menus.any(function(item) {return item.has;})});
		});
		
		zTree = $.fn.zTree.init($("#checkTree"), setting, zNodes);
	};
	
	
	$scope.init = function() {
		$scope.initRolePermission();
	};
	
	$scope.init();
	
// 	$scope.checkAll = function() {
// 		if ($("#checkAll").is(":checked")) {
// 			zTree.checkAllNodes(true);
// 		} else {
// 			zTree.checkAllNodes(false);
// 		}
// 	};
}

app.controller('RoleCtrl', RoleCtrl);
</script>
<style>
#checkTree{ max-height:400px; overflow-y:auto;}
</style>
</head>
<body ng-controller="RoleCtrl">
<form class="form-horizontal create_form">
<legend>
	{{mode == 'create' && '新建角色' || '编辑角色'}}
</legend>

<div class="form-container form-horizontal">
	<div class="form-group">
		<label class="col-sm-1 control-label">
			<span class="star-icon">*</span>角色名称：
		</label>
		
		<div class="col-sm-4">
			<input type="text" class="form-control" ng-model="roleName" ng-disabled="mode == 'update'" ng-change="isNameInvalid()" maxlength="50" />
			<span class="text-danger">{{roleNameError}}</span>
		</div>
	</div>
	
<!-- 	<div class="form-group"> -->
<!-- 		<label class="col-sm-1 control-label"> -->
<!-- 			描述： -->
<!-- 		</label> -->
		
<!-- 		<div class="col-sm-4"> -->
<!-- 			<textarea class="form-control" ng-model="description" maxlength="255" ng-change="isDescInvalid();"></textarea> -->
<!-- 			<span class="text-danger">{{roleDescError}}</span> -->
<!-- 		</div> -->
<!-- 	</div> -->
	
	<div class="form-group">
		<label class="col-sm-1 control-label">
			<span class="star-icon">*</span>角色权限：
		</label>
		
		<div class="col-sm-4">
<!-- 			<label ng-click="checkAll();"> -->
<!-- 				<input type="checkbox" id="checkAll" /> 全选/取消选择 -->
<!-- 			</label> -->
			<div id="checkTree" class="ztree" style="padding: 0px"></div>
			<div class="text-danger">{{permissionError}}</div>
		</div>
	</div>
	
	<div class="form-group">
		<div class="col-sm-offset-1">
			<input type="button" class="btn btn-success" value="保存" ng-click="save()"> 
			<input type="button" class="btn btn-default" value="返回" ng-click="backPage()" >
		</div>
	</div>
</div>
</form>
</body>
</html>